var page=1;

function loadXMLDoc()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            var json=JSON.parse(xmlhttp.responseText);
            for(let i=0;i<json.shop.length;i++){
                var img=document.createElement('img');
                img.src=json.shop[i].pic;

                var a=document.createElement('a');
                a.innerHTML=json.shop[i].title;

                var p=document.createElement('p');
                p.innerHTML=json.shop[i].desc;

               var imgs=document.createElement('img');
                imgs.sre=json.shop[i].pics;

                var span=document.createElement('span');
                span.innerHTML=json.shop[i].price;
                var s=document.createElement('s');
                s.innerHTML=json.shop[i].price1;

                var div=document.createElement("div");
                div.appendChild(img);
                div.appendChild(a);
                div.appendChild(p);
                div.appendChild(imgs);
                div.appendChild(span);
                div.appendChild(s);


                document.querySelector("#list").appendChild(div);
                console.log(list)
            }

        }
    };
    xmlhttp.open("GET",page+".json",true);
    xmlhttp.send();
}
loadXMLDoc();

document.querySelector("#btn").addEventListener('click',function(){
  if(page >= 4){
    page = 1;
  }else{
    page++;
  }
  // 先清空
  document.querySelector("#list").innerHTML = '';
  // 再取数据放到 #list 里面
  loadXMLDoc();
})